<template>
  <div>
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
							<a @click="getimg(item.id)" :class="['mui-control-item',item.id==1?'mui-active':'']" v-for="item in cate" :key="item.id" >
									{{item.title}}
							</a>
        </div>
      </div>
    </div>

    <!-- 底部图片内容区域 -->
    <ul class="ul_img">
			<!-- 指定路由的元素是li元素 -->
      <router-link tag='li' :to="'/home/photoinfo/'+item.id" v-for="item in list" :key="item.id">
        <img v-lazy="item.img_url">
				<div class="info">
					<h1 class="info-title">{{item.title}}</h1>
					<div class="info-body">{{item.body}}</div>
				</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
// 1.导入mui的js文件
import mui from "../../lib/mui/js/mui.min.js"

export default {
  data() {
    return {
      cate: [
        { title: "推荐1", id: 0 },
        { title: "推荐2", id: 2 },
        { title: "推荐3", id: 3 },
        { title: "推荐4", id: 4 },   
        { title: "推荐5", id: 5 },
        { title: "推荐6", id: 6 },
        { title: "推荐7", id: 7 }
      ],
      list: [
		  {id:0,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3240052967,3443336204&fm=27&gp=0.jpg"},
		  {id:1,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4097669422,322996183&fm=27&gp=0.jpg"},
		  {id:2,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img4.imgtn.bdimg.com/it/u=1304058803,1003827275&fm=26&gp=0.jpg"},
		  {id:3,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img1.imgtn.bdimg.com/it/u=1019131598,838589783&fm=26&gp=0.jpg"},
		  {id:4,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img3.imgtn.bdimg.com/it/u=2348716324,3465773319&fm=26&gp=0.jpg"},
		  {id:5,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img0.imgtn.bdimg.com/it/u=201799758,1761065688&fm=26&gp=0.jpg"},
		  {id:6,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img5.imgtn.bdimg.com/it/u=1159195793,207215514&fm=26&gp=0.jpg"},
		  {id:7,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img0.imgtn.bdimg.com/it/u=1291562511,2433008961&fm=26&gp=0.jpg"},
		  {id:0,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3240052967,3443336204&fm=27&gp=0.jpg"},
		  {id:1,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4097669422,322996183&fm=27&gp=0.jpg"},
		  {id:2,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img4.imgtn.bdimg.com/it/u=1304058803,1003827275&fm=26&gp=0.jpg"},
		  {id:3,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img1.imgtn.bdimg.com/it/u=1019131598,838589783&fm=26&gp=0.jpg"},
		  {id:4,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img3.imgtn.bdimg.com/it/u=2348716324,3465773319&fm=26&gp=0.jpg"},
		  {id:5,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img0.imgtn.bdimg.com/it/u=201799758,1761065688&fm=26&gp=0.jpg"},
		  {id:6,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img5.imgtn.bdimg.com/it/u=1159195793,207215514&fm=26&gp=0.jpg"},
		  {id:7,title:"我是一只小毛驴",body:"赶紧气我啊零零零零啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",img_url:"http://img0.imgtn.bdimg.com/it/u=1291562511,2433008961&fm=26&gp=0.jpg"}
	  ]
    };
	},
	 created() {
		//  mui.init()
		this.getAllCategory();
		this.getimg(0)
  },
  // 只有组件初始化之后才可以操作组件
  mounted() {
		
    // 2.初始化滑动控件
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
			getAllCategory() {
				this.$http.get("api/getimgcategory").then(result => {
					if (result.body.status === 0) {
						//手动拼接出一个最完整的 分类列表
						this.cate = result.body.message.unshift({ title: "全部", id: 0 });
					}
				});
			},
		// 根据点击顶部滑动栏获得id值，获得到不同页面的图片数组list
			getimg(id) {
				this.$http.get("api/getimg" + id).then(result => {
					if (result.body.status === 0) {
						this.list = result.body.message;
					}
				});
			}
			
  }
 
};
</script>
<style lang="scss">
	
	.ul_img{
		list-style: none;
		margin: 0px;
		padding: 5px;
		padding-bottom: 0px;

		
		li{
			line-height: 25px;
			position: relative;
			background-color: #cccccc;
			// li居中也可以让懒加载那个加载图标居中。
			text-align: center;
			margin-bottom: 10px;
			box-shadow: 3px 3px 10px #999;
			img{
				width: 100%;
				vertical-align: middle;
			}
			img[lazy="loading"] {
				width: 40px;
				height: 300px;
				margin: auto;
			}
			.info{
				text-align: left;
				color: white;
				position: absolute;
				bottom: 0px;
				background-color: rgba(0,0,0,.3);
				max-height: 140px;
				.info-title{
					font-size: 15px;
				}
				.info-body{
					font-size: 13px;
				}
			}
		}
		

	}
</style>
